
<h2> 我的英雄 </h2>


<div>
  <label>英雄名称<input [value]="heroName"  placeholder="请输入新增英雄名字"/></label>
  <button (click)="addHeroEvent(heroName.value);heroName.value = ''">新增</button>
</div>


<!--*ngFor 是一个 Angular 的复写器（repeater）指令。 它会为列表中的每项数据复写它的宿主元素。-->
<ul class="heroes">
   <li *ngFor = "let hero of heros">
     <a routerLink="/herodetail/{{hero.id}}">
       <span class="badge"> 编号：{{hero.id}}</span>
       <span> 属性：{{hero.type}}</span>
       <span> 名字：{{hero.name}}</span>
     </a>

     <button class="deleteButton" title="删除" (click)="deleteHero(hero)"> 删除 </button>
   </li>
</ul>









